<template>
    <div class="app-container">
        <el-form :inline="true" :model="query" size="mini" v-permission="'article:search'">
            <el-form-item label="文章标题：">
                <!-- “trim()”方法被用于删除输入的字符串两端的空格↓ -->
                <el-input v-model.trim="query.title" placeholder="文章标题"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <!-- “clearable”属性被用于“为该下拉框添加删除（清空）按钮，删除（清空）已选中的选项”；“filterable”属性被用于“为该下拉框添加搜索功能”↓ -->
                <el-select v-model="query.status" style="width:100px" placeholder="选择状态" clearable filterable>
                    <el-option label="已删除" :value="0"></el-option>
                    <el-option label="未审核" :value="1"></el-option>
                    <el-option label="审核通过" :value="2"></el-option>
                    <el-option label="审核未通过" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" :cell-style="rowStyle" align="center" stripe border style="width: 100%">
            <el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
            <el-table-column prop="title" align="center" label="文章标题"></el-table-column>
            <el-table-column prop="viewCount" align="center" label="浏览数"></el-table-column>
            <el-table-column prop="thumbsUp" align="center" label="点赞数"></el-table-column>
            <el-table-column prop="ispublic" align="center" label="是否公开">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.ispublic === 0" type="warning">不公开</el-tag>
                    <el-tag v-if="scope.row.ispublic === 1" type="success">公开</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" align="center" label="状态">
                <template slot-scope="scope"> <!-- 0: 已删除, 1:未审核，2:已审核,3: 审核未通过 -->
                    <el-tag v-if="scope.row.status === 0" type="danger">已删除</el-tag>
                    <el-tag v-if="scope.row.status === 1" >未审核</el-tag>
                    <el-tag v-if="scope.row.status === 2" type="success">已审核</el-tag>
                    <el-tag v-if="scope.row.status === 3" type="warning">审核未通过</el-tag>
                </template>
            </el-table-column>
            <!-- “min-width”表示“对应列的最小宽度”。它与“width”的区别是：“width”是固定的，而“min-width”则会把剩余宽度按比例分配给设置了“min-width”的列↓ -->
            <el-table-column prop="updateDate" align="center" label="最后更新时间" min-width="90px"><template slot-scope="scope">{{getFormat(scope.row.updateDate)}}</template></el-table-column>
            <el-table-column align="center" label="操作" width="210px">
            <!-- “scope”代表当前行的对象，可以通过它来获取当前行的某个属性值↓ -->
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openView(scope.row.id)" v-permission="'article:view'">查看</el-button>
                    <!-- “审核”按钮：只有当“status === 1”时才显示，其他情况下不显示；“删除”按钮：只有当“status !== 0”时才显示，其他情况下不显示↓ -->
                    <el-button v-if="scope.row.status === 1" type="success" size="mini" @click="openAudit(scope.row.id)" v-permission="'article:audit'">审核</el-button>
                    <el-button v-if="scope.row.status !== 0" type="danger" size="mini" @click="handleDelete(scope.row.id)" v-permission="'article:delete'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 20, 50]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>
        <audit :title="audit.title" :dialogVisible="audit.visible" :remoteClose="remoteClose" :id="audit.id" :isAudit="audit.isAudit"/>
    </div>
</template>

<script>
import api from '@/api/article'
// 格式化日期↓
import {format} from '@/utils/date' // ←注意：此处不能少了大括号（因为在“date.js”中“format”是作为普通函数（方法）被导出的，所以在此处导入函数（方法）时要选择函数（方法）的名称）
import Audit from './Audit'
export default {
    name: 'Article', // ←注意：左边这项的值要和路由表中配置的“name”的值保持一致
    components: {Audit},
    data() {
        return {
            list:[], // ←左边这项表示“列表数据”
            page:{ // ←左边这项表示“分页对象”
                current:1, // ←左边这项表示“当前页码”
                size:20 // ←左边这项表示“每页显示的条数”
            },
            query:{}, // ←左边这项表示“查询条件”
            audit:{ // ←左边这项表示“审核子组件传递的属性对象”
                title:'',
                visible:false,
                id:null, // ←左边这项表示“文章ID”
                isAudit:true // ←左边这项表示“打开的对话框是否为‘审核文章’对话框”。“true”为“审核文章”对话框，“false”为“查看文章”对话框
            },
            total:0, // ←左边这项表示“总记录数”
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        // 分页条件查询文章列表
        async fetchData(){
            // const response = await api.getList(this.query,this.page.current,this.page.size)
            const {data} = await api.getList(this.query,this.page.current,this.page.size) // ←注：左边这项采用了“解构赋值”的形式（具体为返回的“response.data”的值被赋值给了“{data}”中的“data”）
            // this.list = response.data.records
            this.list = data.records
            // this.page.total = response.data.total
            this.page.total = data.total
        },
        // 在组件模板中调用此方法来格式化日期
        getFormat(date){
            return format(date)
        },
         // 当每页显示的条数改变后触发此方法，“value”表示“切换之后每页显示的条数”↓
        handleSizeChange(value){
            this.page.size = value
            this.fetchData()
        },
        // 当页码改变后触发此方法，“value”表示“当前点击或输入的（即改变后的）那个页码”↓
        handleCurrentChange(value){
            this.page.current = value
            this.fetchData()
        },
        // 条件查询
        queryData(){
            // 将页码变为“第1页”
            this.page.current = 1
            this.fetchData()
        },
        // 重置
        reload(){
            this.query = {}, // ←左边这一项表示“向‘this.query’传递空对象”
            this.fetchData()
        },
        // 打开“审核文章”对话框
        openAudit(id){
            // 传入需要审核的文章的ID
            this.audit.id = id
            // 把弹出的对话框设置为“审核文章”对话框
            this.audit.isAudit = true
            this.audit.title = '审核文章'
            this.audit.visible = true

        },
        // 关闭对话框
        remoteClose(){
            this.audit.visible = false
            this.fetchData()
        },
        // 打开“查看文章”对话框
        openView(id){ // ←注：左边的小括号内不能忘填“id”，否则会导致产生虽然在点击“查看”按钮时触发了此方法/事件，传递了ID值，但因为在此处未接收ID值，所以浏览器的控制台报“‘id’未定义”的错误
            // 传入需要查看的文章的ID
            this.audit.id = id
            // 把弹出的对话框设置为“审核文章”对话框
            this.audit.isAudit = false
            this.audit.title = '查看文章'
            this.audit.visible = true
        },
        // 删除文章
        handleDelete(id){
            this.$confirm('确认删除这篇文章吗?', '提示', { // 技巧：按组合键“Shift+Tab”会让代码向左缩进
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 发送删除请求
                api.deleteById(id).then(response => {
                    // 处理响应结果
                    this.$message({
                        type: response.code === 20000 ? 'success' : 'error',
                        message: response.message,
                        center:true,
                    });
                })
                // 刷新列表数据
                this.fetchData()
            }).catch(() => {
                // 点击“取消”按钮，取消删除。此处无需做任何逻辑处理（即“不用理会”，因为浏览器会自动关闭消息提示框）          
            });
        },
        rowStyle(){
            return "text-align:center";
        },
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-input__inner{text-align: center;}}
    .el-pagination , .el-select-dropdown__item {text-align: center;}
</style>